/**********
@name: SEO摘要组件
@describtion: props: title:字段别名,value:字段值
@author:liubingye
@date:2023-02-10 10:29:07
***********/
<template>
  <el-form-item :label="props.title">
    <el-input v-model="inputVal" type="textarea" :rows="8" />
  </el-form-item>
  <div class="seo_tips">
      <p @click="getSEOSummary">自动抓取SEO摘要</p>
      <el-popover
        placement="bottom"
        trigger="hover"
        content="自动抓取SEO摘要"
      >
        <template #reference>
            <el-icon color="#ee9f28"><QuestionFilled /></el-icon>
        </template>
      </el-popover>
  </div>
</template>

<script setup>
import { getSeoSummary } from "@/api/content"
import { computed } from "vue";
import { QuestionFilled } from '@element-plus/icons-vue'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: ''
  },
  children: {
    type: Array,
    default: () => []
  },
  childrenShow: {
    type: Boolean,
    default: false
  }
})

const inputVal = computed({
  get: () => props.value,
  set: (val) => {
    handleChange(val)
  }
})
//获取seo摘要
const getSEOSummary = async () => {
    let res = await getSeoSummary()
    inputVal.value = res.data
    handleChange(inputVal.value)
}
const emits = defineEmits(['update:value'])
const handleChange = (val) => {
  emits('update:value',val)
}
</script>
<style lang="scss" scoped>
.seo_tips {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    p {
        font-size: 14px;
        color:#4D99F2;
        cursor: pointer;
    }
}
</style>
